class Count extends React.Component{
    constructor(){
        this.state={count:0};
    }

    update(){
        this.setState({count:++this.state.count});
    }
    render(){
        return (
            <div>
                <h1>Count</h1>
                <h1>{this.state.count}</h1>
            </div>
        );


    }
}
count=React.render(
    <Count />,
    document.querySelector('#content')
);

class Comment extends React.Component{
    render(){
        return (
        <div>
            <div className="comment-content">
                {this.props.children}
            </div>
            <div className="comment-author" >
                -- {this.props.author}
            </div>
        </div>
        );
    }
}
class CommentForm extends React.Component{
    render(){
        return(
            <div>
                <h1>Comment Form Area</h1>
            </div>
        );
    }
}

class CommentList extends React.Component{
    render(){
        var commentsNode=this.props.commentList.map(function (comment,index) {
            return <Comment key={"comment_"+index} author={comment.author}>{comment.comments}</Comment>;
        });
        return(
            <div>
                {commentsNode}
            </div>
        );
    }
}
var comment=[{author:'Tiffiny',comments:"It's good!"},
    {author:'Logan',comments:"It's a good idea!"}];
class CommentBox extends React.Component{

    render(){
        return (
            <div className="comment-box">
                <h1>Comments Area</h1>
                <CommentList commentList={comment}/>
                <CommentForm/>
            </div>

        );


    }
}
React.render(
    <CommentBox />,
    document.querySelector('#commentbox')
);